<template>
  <div class="container mobileBanner">
    <div class="row">
      <!-- 设置底部跳转路径，文字与图片 -->
      <div class="col-12 bg-white border-top d-flex justify-content-around banner">
        <router-link to='/home' class="d-flex flex-column align-items-center">
          <img src="@/assets/img/MobileBanner/01.png" alt="" :class="{hidingImg: theHash('home')}">
          <img src="@/assets/img/MobileBanner/01_ac.png" alt="" :class="{hidingImg: !theHash('home')}" >
          <span :class="{spanActive: theHash('home')}">Home</span>
        </router-link>

        <router-link to='/userOnlineHistry' class="d-flex flex-column align-items-center">
          <img src="@/assets/img/MobileBanner/02.png" alt="" :class="{hidingImg: theHash('userOnlineHistry')}">
          <img src="@/assets/img/MobileBanner/02_ac.png" alt="" :class="{hidingImg: !theHash('userOnlineHistry')}" >
          <span @click="doRefresh" :class="{spanActive: theHash('userOnlineHistry')}">Library</span>
        </router-link>

        <router-link to='/details' class="d-flex flex-column align-items-center">
          <img src="@/assets/img/MobileBanner/03.png" alt="" :class="{hidingImg: theHash('details')}">
          <img src="@/assets/img/MobileBanner/03_ac.png" alt="" :class="{hidingImg: !theHash('details')}" >
          <span :class="{spanActive: theHash('details')}">Store</span>
        </router-link>

        <router-link to='/userCenter' class="d-flex flex-column align-items-center">
          <img src="@/assets/img/MobileBanner/04.png" alt="" :class="{hidingImg: theHash('userCenter')}">
          <img src="@/assets/img/MobileBanner/04_ac.png" alt="" :class="{hidingImg: !theHash('userCenter')}" >
          <span @click="nowPath" :class="{spanActive: theHash('userCenter')}">User</span>
        </router-link>

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'MobileBanner',
    data () {
      return {
        flag: ''
      }
    },
    methods: {
      nowPath() {
        // 进入登录注册前在本地保存进入前的路由地址
        console.log(window.location.hash.slice(1))
        localStorage.setItem('intoLoginFlag', window.location.hash.slice(1))
      },
      doRefresh() {
        setTimeout(() => {
          window.location.reload();
        }, 100)
      }
    },
    computed: {
      theHash() {
        return path => path == window.location.hash.slice(2) ? this.flag = true : this.flag = false;
      }
    },
    mounted() {
    },
  }

</script>

<style scoped>
  .banner {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9;
  }
  .banner img {
    width: 40px;
  }
  span {
    color: #333;
  }
  .spanActive {
    color: rgb(0, 123, 255);
  }
  .hidingImg {
    display: none;
  }
</style>